<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .success{
            color: green;
        }
    </style>
</head>
<body>
    <!-- 
        HTML属性 - html规范描述的 标签上具有固定意义的内置属性
        DOM属性 - 标签由JS转换成的对象格式数据具有内置属性
        HTML标签 和 JS DOM对象之间通过 IDL 映射规则完成对应关联 
    -->
    <div id="app">
        <pre v-pre class="note">
        v-bind 提供为vue容器中的标签完成普通属性绑定操作
        语法：v-bind:[属性参数][.修饰符][……]="(绑定属性的合理取值)(值来源于和插值表达式相同取值范围)"
            + 属性参数 - HTML标签属性 - 自定义HTML标签属性 - DOM属性的绑定（通过修饰符.prop完成描述的）
        语法简写：v-bind: 可以直接简写为 :  => 例如 v-bind:id=""  简化为 :id=""
        特性：响应式特性
        </pre>
        <p id="aa">绑定id属性- id="aa"</p>
        <p v-bind:id=" pid ">绑定id属性-取值动态- v-bind:id=" pid "-pid:{{ pid }}</p>
        <input type="text" @input=" pid=$event.target.value ">
        <p v-bind:itany=" itany ">绑定自定义属性 itany- v-bind:itany="itany"</p>
        <hr>
        <!-- 直接绑定html属性 -->
        <p v-bind:itany=" itany ">itany样式属性绑定</p>
        <!-- 直接将itany绑定到DOM对象上 -->
        <p v-bind:itany.prop=" itany ">itany样式属性绑定</p>
        <hr>
        <p>事件代理和委托(通过事件传播由父元素统一管理事件)=>一个列表页面结构，内部的所有元素都具有点击事件，但元素数量过大动态渲染较慢，如果通过事件优化渲染操作</p>
        <ul @click="printLiAttr($event)">
            <li data-key="1" v-bind:param.prop=" '1' " >1</li>
            <li data-key="2" v-bind:param.prop=" '2' " >2</li>
            <li data-key="3" v-bind:param.prop=" '3' " >3</li>
            <li data-key="4" v-bind:param.prop=" '4' " >4</li>
            <li data-key="5" v-bind:param.prop=" '5' " >5</li>
            <li data-key="6" v-bind:param.prop=" '6' " >6</li>
        </ul>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   pid:"bb",
                   itany:"网博"
                }
            },
            methods:{
                printLiAttr(e){
                    console.log("第",e.target.getAttribute("data-key"),"个li",e.target)
                    console.log("第",e.target.param,"个li",e.target)
                }
            }
        }).mount("#app");
    </script>
</body>
</html>